<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="fore/common/foreHeader::html(title='文章')">
</head>
<link th:href="@{/asserts/css/markdown.css}" rel="stylesheet">

<body>
<div id="vue" class="container">
    <div th:replace="~{fore/common/common :: #header}"></div>
    <br>
    <h1 style="text-align: center; border-bottom: 0;">{{bean.title}}</h1>
    <div id="markDown">
    </div>
</div>
<div th:replace="~{fore/common/common :: #footer}"></div>
<div th:include="fore/common/foreFooter::html"></div>
</body>
<script>


    $(function () {
        var data4Vue = {
            uri:'../../articles/',
            bean: [],
            content:{}
        };
        Vue.filter('time', function (time) {
            var date = new Date(time);
            return Str=date.getFullYear() + '-' +
                (date.getMonth() + 1) + '-' +
                date.getDate() + ' ' +
                date.getHours() + ':' +
                date.getMinutes() + ':' +
                date.getSeconds();
        });
        var vue = new Vue({
            el: "#vue",
            data: data4Vue,
            mounted: function () {
                var param = window.location.pathname.split('/');
                var length = param.length;
                this.get(param[length -1]);
            },
            methods:{
                get:function (start) {
                    var url = this.uri + start;
                    axios.get(url).then(function(response) {
                        // console.log(response.data);
                        vue.bean = response.data.bean;
                        vue.content = response.data.markDownHtml;
                        $("#markDown")[0].innerHTML=vue.content
                    });
                }
            }
        });
    })
</script>
</html>
